<template>
  <div id="assetsMarkOne">
      <el-form :model="assetsMarkOneForm" label-width="160px" class="assetsMarkOne-form" ref="FormData">
          <h3>新增标的</h3>
          <!--活动名称-->
          <el-form-item label="产品名称" required prop="createLoan.productNo">
              <el-select class="assetsMarkOne-input" placeholder="产品名称" v-model="assetsMarkOneForm.createLoan.productNo" @change="changeSelect()">
                  <el-option label="U车贷" :value=1001></el-option>
                  <el-option label="U钱赚" :value=1301></el-option>
              </el-select>
          </el-form-item>

          <h3>借款信息</h3>
          <!--项目名称-->
          <el-form-item
              label="项目名称"
              prop="createLoan.projectName"
              :rules="[
                  { required: true, message: '请输入项目名称' }
              ]"
          >
              <el-input class="assetsMarkOne-input" v-model="assetsMarkOneForm.createLoan.projectName" placeholder="请填写项目名称"></el-input>
          </el-form-item>

          <!--项目金额-->
          <el-form-item label="项目金额" prop="autoassets.loanAmount" required>
              <el-input class="assetsMarkOne-input" v-model="assetsMarkOneForm.autoassets.loanAmount"  :disabled="true">
                  <template slot="append">元</template>
              </el-input>
          </el-form-item>

          <!--借款期限-->
          <el-form-item label="借款期限" prop="autoassets.loanTime" required>
              <el-input class="assetsMarkOne-input" v-model="assetsMarkOneForm.autoassets.loanTime" :disabled="true">
                  <template slot="append">{{assetsMarkOneForm.autoassets.loanUnit === 0? "年":assetsMarkOneForm.autoassets.loanUnit === 1?"月":"日"}}</template>
              </el-input>
          </el-form-item>

          <!--管理费率-->
          <el-form-item
              label="管理费率"
              prop="createLoan.loanFeeRate"
              :rules="[
                { required: true, type: 'number', message: '管理费率必须为数字值' }
              ]"
          >
              <el-input class="assetsMarkOne-input" v-model.number="assetsMarkOneForm.createLoan.loanFeeRate" placeholder="请填写管理费率">
                  <template slot="append">%</template>
              </el-input>
          </el-form-item>

          <!--预期利率-->
          <el-form-item
              label="预期利率"
              prop="createLoan.interestRate"
              :rules="[
                { required: true, type: 'number', message: '预期利率必须为数字值' }
              ]"
          >
              <el-input class="assetsMarkOne-input" v-model.number="assetsMarkOneForm.createLoan.interestRate" placeholder="请填写预期利率">
                  <template slot="append">%</template>
              </el-input>
          </el-form-item>

          <div class="form-item-span">
              <!--奖励利率-->
              <div class="one">
                  <el-form-item
                      label="奖励利率"
                      prop="createLoan.rewardRate"
                      :rules="[
                        { required: true, type: 'number', message: '奖励利率必须为数字值' }
                      ]"
                  >
                      <el-input class="form-item-input" v-model.number="assetsMarkOneForm.createLoan.rewardRate" placeholder="请填写奖励利率">
                          <template slot="append">%</template>
                      </el-input>
                  </el-form-item>
              </div>
              <!--利率单位-->
              <div class="two">
                  <el-form-item label="利率单位" prop="rateUnit" required>
                      <el-select v-model="assetsMarkOneForm.rateUnit" class="two-width" placeholder="利率单位" style="width: 181px">
                          <el-option label="年利率" value="年利率"></el-option>
                      </el-select>
                  </el-form-item>
              </div>
          </div>

          <!--还款方式-->
          <el-form-item label="还款方式" prop="autoassets.repayType" required>
              <el-select class="assetsMarkOne-input" placeholder="还款方式" v-model="assetsMarkOneForm.autoassets.repayType" :disabled="true">
                  <el-option label="到期还款" :value=0></el-option>
                  <el-option label="先息后本" :value=1></el-option>
                  <el-option label="等额本息" :value=2></el-option>
                  <el-option label="等额本金" :value=3></el-option>
              </el-select>
          </el-form-item>

          <!--开始时间-->
          <el-form-item
              label="开始时间"
              prop="createLoan.beginTime"
              :rules="[
                        { required: true, type: 'date', message: '请选择开始时间' }
              ]"
          >
              <el-date-picker
                  class="assetsMarkOne-input"
                  placeholder="请选择开始时间"
                  v-model="assetsMarkOneForm.createLoan.beginTime"
                  type="datetime"
              >
              </el-date-picker>
          </el-form-item>

          <!--结束时间-->
          <el-form-item
              label="结束时间"
              prop="createLoan.endTime"
              :rules="[
                        { required: true, message: '请选择结束时间' }
                  ]"
          >
              <el-date-picker
                  class="assetsMarkOne-input"
                  placeholder="请选择结束时间"
                  v-model="assetsMarkOneForm.createLoan.endTime"
                  type="datetime"
              >
              </el-date-picker>
          </el-form-item>

          <!--最大投资金额-->
          <el-form-item
              label="最大投资金额"
              prop="createLoan.maxAmount"
              :rules="[
                { required: true, type: 'number', message: '最大投资金额必须为数字值' }
              ]"
          >
              <el-input class="assetsMarkOne-input" v-model.number="assetsMarkOneForm.createLoan.maxAmount" placeholder="请填写最大投资金额">
                  <template slot="append">元</template>
              </el-input>
          </el-form-item>

          <!--最小投资金额-->
          <el-form-item
              label="最小投资金额"
              prop="createLoan.minAmount"
              :rules="[
                { required: true, type: 'number', message: '最小投资金额必须为数字值' }
              ]"
          >
              <el-input class="assetsMarkOne-input" v-model.number="assetsMarkOneForm.createLoan.minAmount" placeholder="请填写最小投资金额">
                  <template slot="append">元</template>
              </el-input>
          </el-form-item>

          <!--是否自动投标-->
          <el-form-item label="是否自动投标" prop="createLoan.autoStatus" required>
              <el-select v-model="assetsMarkOneForm.createLoan.autoStatus" class="assetsMarkOne-input" placeholder="是否自动投标">
                  <el-option label="是" :value=1></el-option>
                  <el-option label="否" :value=0></el-option>
              </el-select>
          </el-form-item>

          <!--是否允许使用投资券-->
          <el-form-item label="是否允许使用投资券" prop="createLoan.allowInvestTicket" required>
              <el-select v-model="assetsMarkOneForm.createLoan.allowInvestTicket" class="assetsMarkOne-input" placeholder="是否自动投标">
                  <el-option label="允许" :value=1></el-option>
                  <el-option label="不允许" :value=0></el-option>
              </el-select>
          </el-form-item>

          <!--是否允许使用加息券-->
          <el-form-item label="是否允许使用加息券" prop="createLoan.allowAddTicket" required>
              <el-select v-model="assetsMarkOneForm.createLoan.allowAddTicket" class="assetsMarkOne-input" placeholder="是否自动投标">
                  <el-option label="允许" :value=1></el-option>
                  <el-option label="不允许" :value=0></el-option>
              </el-select>
          </el-form-item>

          <!--是否允许债权转让-->
          <el-form-item label="是否允许债权转让" prop="createLoan.allowTransfer" required>
              <el-select v-model="assetsMarkOneForm.createLoan.allowTransfer" class="assetsMarkOne-input" placeholder="是否自动投标">
                  <el-option label="允许" :value=1></el-option>
                  <el-option label="不允许" :value=0></el-option>
              </el-select>
          </el-form-item>

          <!--车辆付款方式-->
          <el-form-item label="车辆付款方式" prop="createLoan.carPayment" required>
              <el-select v-model="assetsMarkOneForm.createLoan.carPayment" class="assetsMarkOne-input" placeholder="车辆付款方式">
                  <el-option label="按揭" :value=0></el-option>
                  <el-option label="全款" :value=1></el-option>
              </el-select>
          </el-form-item>

          <el-form-item
              label="借款描述"
              prop="createLoan.remark"
              :rules="[
                  { required: true, message: '请输入借款描述' }
              ]"
          >
              <el-input type="textarea" v-model="assetsMarkOneForm.createLoan.remark" :rows="5" style="width: 502px;" resize="none"></el-input>
          </el-form-item>

          <el-form-item
              label="风控意见"
              prop="createLoan.riskInfo"
              :rules="[
                  { required: true, message: '请输入风控意见' }
              ]"
          >
              <el-input type="textarea" v-model="assetsMarkOneForm.createLoan.riskInfo" :rows="5" style="width: 502px;" resize="none"></el-input>
          </el-form-item>


          <el-form-item>
              <el-button type="primary" @click="onSubmit()">下一步</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>

<script>
    import { getLoanProjectInfo } from "@/api/api";
    export default {
        name: "assetsMarkOne",
        data () {
            return {
                pickerOptions0: {
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e7;
                    }
                },
                assetsMarkOneForm: {
                    name: "",
                    rateUnit: "年利率",
                    // 从后台后去的参数
                    autoassets: {},
                    // 传给后台的参数
                    createLoan: {
                        loanNo: "",  // 借款编号
                        rewardRate: "", // 奖励利率
                        beginTime: new Date(), // 开始时间
                        endTime: new Date().setDate(new Date().getDate()+7), // 结束时间
                        maxAmount: "", // 最大投资金额
                        minAmount: "", // 最小投资金额
                        loanFeeRate: "", // 管理费率
                        carPayment: 1, // 车辆还款方式 [0：按揭，1：全款]
                        autoStatus: 1, // 自动投标 [0：不能自动投标，1：可以自动投标]
                        allowInvestTicket: 1, // 是否允许使用投资券 [0：不允许，1：允许]
                        allowAddTicket: 1, // 是否允许使用加息券 [0：不允许，1：允许]
                        allowTransfer: 1, // 是否允许债权转让 [0：不允许，1：允许]
                        remark: "", // 借款描述
                        riskInfo: "", // 风控意见
                        productNo: 1001, // 产品编号
                        productName: "", // 产品名称
                        projectName: "", // 项目名称
                        interestRate: "" // 项目金额
                    }
                }
            };
        },
        watch: {
            $route (to) {
                if(to.name === "assetsMarkOne") {
                    this.LoanProject();
                }
                if(to.name === "asset") {
                    this.$refs.FormData.resetFields();
                    window.sessionStorage.removeItem("createLoan");
                    this.assetsMarkOneForm.createLoan.productNo = 1001;
                    this.assetsMarkOneForm.createLoan.projectName = "";
                    this.assetsMarkOneForm.createLoan.loanNo ="";
                    this.assetsMarkOneForm.createLoan.interestRate ="";
                    this.assetsMarkOneForm.createLoan.rewardRat = "";
                    this.assetsMarkOneForm.createLoan.beginTime = new Date();
                    this.assetsMarkOneForm.createLoan.endTime = new Date().setDate(new Date().getDate()+7);
                    this.assetsMarkOneForm.createLoan.maxAmount = "";
                    this.assetsMarkOneForm.createLoan.minAmount = "";
                    this.assetsMarkOneForm.createLoan.autoStatus =1;
                    this.assetsMarkOneForm.createLoan.remark ="";
                    this.assetsMarkOneForm.createLoan.loanFeeRate ="";
                }
            }
        },
        mounted () {
            this.$nextTick(function () {
                if (window.sessionStorage["createLoan"]) {
                    let createLoanInfo = JSON.parse(window.sessionStorage.getItem("createLoan"));
                    this.assetsMarkOneForm.createLoan = createLoanInfo;
                    this.assetsMarkOneForm.createLoan.beginTime = "";
                    this.assetsMarkOneForm.createLoan.endTime = "";
                }
                this.LoanProject();
                this.changeSelect();
            });
        },
        methods: {
            changeSelect () {
                if(this.assetsMarkOneForm.createLoan.productNo === 1001) {
                    this.assetsMarkOneForm.createLoan.productName = 'U车贷';
                    this.assetsMarkOneForm.createLoan.projectName = 'U车贷';
                } else if (this.assetsMarkOneForm.createLoan.productNo === 1301) {
                    this.assetsMarkOneForm.createLoan.productName = 'U钱赚';
                    this.assetsMarkOneForm.createLoan.projectName = 'U钱赚';
                }
            },
            // 下一步；
            async onSubmit () {
                await this.$refs.FormData.validate((valid) => {
                    if (valid) {
                        let tempIndex = JSON.stringify(this.assetsMarkOneForm.createLoan);
                        window.sessionStorage["createLoan"] = tempIndex;
                        this.$router.push({path: "/asset/assetsMarkTwo", query: { loanNo: this.$route.query.loanNo }});
                    };
                });
            },
            // 或者系统自带的参数
            async LoanProject () {
                let _this = this;
                this.assetsMarkOneForm.createLoan.loanNo = this.$route.query.loanNo;
                await getLoanProjectInfo({
                    "loanNo": this.assetsMarkOneForm.createLoan.loanNo
                }).then((res) => {
                    let Data = JSON.parse(res.data.ciphertext);
                    console.log(Data);
                    _this.assetsMarkOneForm.autoassets = Data;
                    _this.assetsMarkOneForm.createLoan.maxAmount = _this.assetsMarkOneForm.autoassets.maxAmount;
                    _this.assetsMarkOneForm.createLoan.minAmount = _this.assetsMarkOneForm.autoassets.minAmount;
                    _this.assetsMarkOneForm.createLoan.autoStatus = _this.assetsMarkOneForm.autoassets.autoStatus;
                    _this.assetsMarkOneForm.createLoan.allowInvestTicket = _this.assetsMarkOneForm.autoassets.allowInvestTicket;
                    _this.assetsMarkOneForm.createLoan.allowAddTicket = _this.assetsMarkOneForm.autoassets.allowAddTicket;
                    _this.assetsMarkOneForm.createLoan.allowTransfer = _this.assetsMarkOneForm.autoassets.allowTransfer;
                    _this.assetsMarkOneForm.createLoan.projectName = _this.assetsMarkOneForm.autoassets.projectName;
                    _this.assetsMarkOneForm.createLoan.interestRate = _this.assetsMarkOneForm.autoassets.interestRate;
                    _this.assetsMarkOneForm.createLoan.rewardRate = _this.assetsMarkOneForm.autoassets.rewardRate;
                    _this.assetsMarkOneForm.createLoan.remark = _this.assetsMarkOneForm.autoassets.remark;
                    _this.assetsMarkOneForm.createLoan.riskInfo = _this.assetsMarkOneForm.autoassets.riskInfo;
                    _this.assetsMarkOneForm.createLoan.loanFeeRate = _this.assetsMarkOneForm.autoassets.loanFeeRate;
                    _this.assetsMarkOneForm.createLoan.carPayment = _this.assetsMarkOneForm.autoassets.carPayment;
                });
            }
        }
    };
</script>

<style lang="scss">
  #assetsMarkOne{
      border: 1px solid #eee;
      margin:20px;
      padding:22px 0 0 20px;
      min-width: 1200px;
      box-sizing: border-box;
      overflow: hidden;
      .assetsMarkOne-form{
          overflow: hidden;
          h3{
              width: 100px;
              text-align: right;
              margin-bottom: 40px;
          }
          h3:nth-of-type(2){
              margin-top: 50px;
          }
          .assetsMarkOne-input{
              width: 500px;
          }
          .assetsMarkOne-input-tips{
              margin-left: 20px;
              color: #ccc;
          }
          .form-item-span{
              overflow: hidden;
              .form-item-input{
                  width: 200px;
              }

              .one{
                  float: left;
              }
              .two{
                  float: left;
              }
          }
      }
  }
</style>
